<template>
    <div>
        <h1>查看{{ clazzName }}班学生信息</h1>
        <el-table :data="students" style="width: 100%">
            <el-table-column prop="id" label="学生ID" />
            <el-table-column prop="number" label="学号" />
            <el-table-column prop="name" label="姓名" />
        </el-table>
    </div>
</template>

<script>
import service from '@/api';
export default {
    data() {
        return {
            clazzId: null,
            clazzName: '',
            students: []
        }
    },
    created() {
        this.clazzId = this.$route.params.clazzId;
        this.fetchData();
    },
    methods: {
        async fetchData() {
            const clazz = await service.get(`/api/clazz/${this.clazzId}`, null, "获取班级信息");
            this.clazzName = clazz.name;
            this.students = await service.get(`/api/students/clazz/${this.clazzId}`, null, "获取学生信息");
        }
    }
}
</script>

<style scoped></style>